<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
			beforeback:function(){
			//实现自己的逻辑
				return false;//return false时不再执行后退逻辑
			},
			gestureConfig: {
				longtap: true, //默认为false
				hold: true,
				release: true
			}
		});
		 
		mui.plusReady(function() {
			//读取本地存储，检查是否为首次启动
			var showGuide = plus.storage.getItem("lauchFlag");
			//仅支持竖屏显示
			plus.screen.lockOrientation("portrait-primary");
			if(showGuide) {
				//有值，说明已经显示过了，无需显示；
				//关闭splash页面；
				plus.navigator.closeSplashscreen();
				plus.navigator.setFullscreen(false);
				judge()
			} else {
				//显示启动导航
				mui.openWindow({
					id: 'guide',
					url: 'guide.html',
					styles: {
						popGesture: "none"
					},
					show: {
						aniShow: 'none'
					},
					waiting: {
						autoShow: false
					}
				});
			}

		});
		function judge(){
			var video = document.querySelector('#video');
			video.play();
			video.onended = function() {
				video.play();
			};
		}
		</script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/login.css" rel="stylesheet" />
	</head>

	<body>
		<div class="bg-video">
			<video id="video" width="100%" height="100%" src="video/login.mp4">
			</video>
			<div class="login_title">小聚</div>
			<div class="buttom" class="mui-clearfix">
				<div class="login_button">登录</div>
				<div class="registered_button">注册</div>
			</div>
		</div>

		<div class="login">
			<div class="back">
				<img class="backloginimg" src="img/wrong.png" alt="" />
			</div>
			<div class="top_title">登录小聚</div>
			<form class="mui-input-group one_form">
				<div class="mui-input-row login_form">
					<input id="loginaccount" value="" type="text" class="mui-input-clear" placeholder="输入账号" style="text-align: center;">
				</div>

			</form>
			<form class="mui-input-group two_form">
				<div class="mui-input-row login_form">
					<input id="loginpwd" value="" type="password" class="mui-input-password" placeholder="输入密码" style="text-align: center;">
				</div>
			</form>
			<div class="forget">忘记密码？</div>
			<button id="loginbutton" type="button" data-loading-text="登录中" class="mui-btn">登录</button>
			<div class="now_registered">还没有账号？<span class="immediately">立即注册</span></div>
		</div>

		<div class="registered">
			<div class="back">
				<img class="backregisteredimg" src="img/wrong.png" alt="" />
			</div>
			<div class="top_title">注册小聚</div>
			<form class="mui-input-group one_form">
				<div class="mui-input-row login_form">
					<input id="registeredaccount" type="text" class="mui-input-clear" placeholder="输入账号" style="text-align: center;">
				</div>
			</form>
			<form class="mui-input-group two_form">
				<div class="mui-input-row login_form">
					<input id="registeredpwd" type="password" class="mui-input-password" placeholder="输入至少8位密码" style="text-align: center;">
				</div>
			</form>
			<div class="registered_sex">
				<div id="man" value="男">
					<img class="mantrue" src="img/mantrue.png" style="display: block;"/>
					<img src="img/man.png" / class="man" style="display: none;">
				</div>
				<div class="sex_man">男</div>
				<div id="woman" value="女">
					<img src="img/woman.png" alt="" class="woman" />
					<img src="img/womantrue.png" class="womantrue" style="display: none;">
				</div>
				<div class="sex_woman">女</div>
			</div>
			<button id="registeredbutton" type="button" data-loading-text="提交中" class="mui-btn">注册</button>
			<div class="note">注意：<span>性别不可更改！</span></div>
		</div>

	</body>
	<script src="js/ip.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		
		mui(document.body).on('tap', '.mui-btn', function(e) {
			mui(this).button('loading');
			setTimeout(function() {
				mui(this).button('reset');
			}.bind(this), 2000);
		});
		var LoginbuttonDom = document.getElementsByClassName("login_button")[0];
		var RegisteredbuttonDom = document.getElementsByClassName("registered_button")[0];
		var LoginDom = document.getElementsByClassName("login")[0];
		var RegisteredDom = document.getElementsByClassName("registered")[0];
		var ImgloginDom = document.getElementsByClassName("backloginimg")[0];
		var ImgregisteredDom = document.getElementsByClassName("backregisteredimg")[0];
		var ManDom = document.getElementById("man");
		var WomanDom = document.getElementById("woman");
		var ImgmantrueDom = document.getElementsByClassName("mantrue")[0];
		var ImgmanDom = document.getElementsByClassName("man")[0];
		var ImgwomantrueDom = document.getElementsByClassName("womantrue")[0];
		var ImgwomanDom = document.getElementsByClassName("woman")[0];
		var ImmediatelyDom = document.getElementsByClassName("immediately")[0];

		//document.querySelector('.login')
		LoginbuttonDom.addEventListener("hold", function() {
			this.style.backgroundColor = "rgba(0,0,0,0.6)";
		});

		LoginbuttonDom.addEventListener("release", function() {
			this.style.backgroundColor = "rgba(0,0,0,0.2)";
		});

		RegisteredbuttonDom.addEventListener("hold", function() {
			this.style.backgroundColor = "rgba(255,255,255,0.5)";
		});

		RegisteredbuttonDom.addEventListener("release", function() {
			this.style.backgroundColor = "white";
		});
		LoginbuttonDom.addEventListener("click", function() {
			LoginDom.style.marginTop = "0%";
		});
		ImgloginDom.addEventListener("click", function() {
			LoginDom.style.marginTop = "200%";
			document.getElementById("loginaccount").value = "";
			document.getElementById("loginpwd").value = "";
		});
		RegisteredbuttonDom.addEventListener("click", function() {
			RegisteredDom.style.marginTop = "0%";

		});
		ImgregisteredDom.addEventListener("click", function() {
			RegisteredDom.style.marginTop = "200%";
			document.getElementById("loginaccount").value = "";
			document.getElementById("loginpwd").value = "";
			document.getElementById("registeredaccount").value = "";
			document.getElementById("registeredpwd").value = "";
		});
		WomanDom.addEventListener("click", function() {
			ImgmantrueDom.style.display = "none";
			ImgmanDom.style.display = "block";
			ImgwomanDom.style.display = "none";
			ImgwomantrueDom.style.display = "block";
		});
		ManDom.addEventListener("click", function() {
			ImgmantrueDom.style.display = "block";
			
			ImgmanDom.style.display = "none";
			ImgwomantrueDom.style.display = "none";
			ImgwomanDom.style.display = "block"
		});
		ImmediatelyDom.addEventListener("click", function() {
			LoginDom.style.marginTop = "200%";
			RegisteredDom.style.marginTop = "0%";

		});
		document.getElementById("loginbutton").addEventListener("tap", function() {
			var nameval = document.getElementById("loginaccount").value;
			var pwdval = document.getElementById("loginpwd").value;
			if(nameval === undefined || nameval.replace(/\s+/g, "") === "") {
				mui.toast("用户名不能为空");
			} else if(pwdval === undefined || pwdval.replace(/\s+/g, "") === "") {
				mui.toast("密码不能为空");
			} else {
				mui.post("http://"+ip+"/xiaojv/Api/index.php?p=front&m=userlogin&a=login", {
					name: nameval,
					pwd: pwdval
				}, function(data) {
					//服务器返回响应，根据响应结果，分析是否登录成功；
					if(data != null) {
						if(data.status == 0) {
							var index=plus.webview.getWebviewById( 'index' );
							var me=plus.webview.getWebviewById( 'me' );
							if(index){
								index.evalJS("ajax()");
							}
							if(me){
								me.evalJS("ajax()");
							}
							mui.openWindow({
								url: "index.html",
								id: "index",
							})
						} else {
							mui.toast("账户已被封号");
						}

					} else {
						mui.toast("用户名或密码错误")
					}

				}, 'json');
			}
		});

		document.getElementById("registeredbutton").addEventListener("tap", function() {
			var nameval = document.getElementById("registeredaccount").value;
			var pwdval = document.getElementById("registeredpwd").value;
			ManDom.getAttribute("value");
			WomanDom.getAttribute("value");
			document.getElementById("woman").value;
			if(nameval === undefined || nameval.replace(/\s+/g, "") === "") {
				mui.toast("用户名不能为空");
			} else if(pwdval === undefined || pwdval.replace(/\s+/g, "") === "") {
				mui.toast("密码不能为空");
			} else {
				if(ImgmantrueDom.style.display == "block") {
					var sexval = ManDom.getAttribute("value");
					mui.post("http://"+ip+"/xiaojv/Api/index.php?p=front&m=registeredlogin&a=registeredlogin", {
						username: nameval,
						pwd: pwdval,
						sex: sexval
					}, function(data) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						if(data != null) {
							LoginDom.style.marginTop = "0%";
							RegisteredDom.style.marginTop = "200%";
							document.getElementById("loginaccount").value = nameval;
							document.getElementById("loginpwd").value = pwdval;
							mui.toast("注册成功")
						} else {
							mui.toast("注册失败，请修改用户名")
						}

					}, 'json');
				} else {
					var sexval = WomanDom.getAttribute("value");
					
					mui.post("http://"+ip+"/xiaojv/Api/index.php?p=front&m=registeredlogin&a=registeredlogin", {
						username: nameval,
						pwd: pwdval,
						sex: sexval
					}, function(data) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						console.log();
						if(data != null) {
							LoginDom.style.marginTop = "0%";
							RegisteredDom.style.marginTop = "200%";
							document.getElementById("loginaccount").value = nameval;
							document.getElementById("loginpwd").value = pwdval;
							mui.toast("注册成功")
						} else {
							mui.toast("注册失败，请修改用户名")
						}

					}, 'json');
				}
			}

		});
	</script>

</html>